<template>
    <div>
        <h2>{{ msg }}</h2>
        <hr>
        <h3>{{ $store.state.count }}</h3>
        <div>
            <button @click="$store.commit('add',10)">++</button>
            <button @click="$store.commit('reduce')">--</button>
            <input type="button" value="mapStateReduce" @click='reduce'>
            <button @click='addAction'>addAction++</button>
            <button @click='reduceAction'>reduceAction--</button>
        </div>
        {{ count }}
    </div>
</template>
<script>
import store from '@/vuex/store'
import { mapState,mapMutations,mapGetters, mapActions } from 'vuex'
export default {
    data(){
        return {
            msg:'hello Vuex'
        }
    },
    // computed:{  // state访问对象的三种方式
    //     count(){
    //         return this.$store.state.count;
    //     },
       
    // },
    // computed: mapState({ // 通过mapState
    //     count:state=>state.count
    // }),
    // computed:mapState({
    //     count:function(state){
    //         return state.count
    //     }
    // }),
    computed:{
        ...mapState(["count"]),
        // count(){
        //     return this.$store.getters.count
        // },
        ...mapGetters(['count']), // 用mapGetters简写，
       

    },
    methods:{ 
     ...mapMutations([ 'add','reduce']),// 获得vuex状态管理的方法
     ...mapActions(['addAction','reduceAction'])
    },
    
  

}
</script>
